<template>
<div class="date">
  <div class="isIcon" v-show="isShowIcon">
    <div class="Icon">
      <el-icon><postcard /></el-icon>
    </div>
  </div>
  <div class="dateIcon">
    <div class="date-mouth">{{mouth || '未知'}}</div>
    <div class="date-year">{{ year || '未知'}}</div>
  </div>
</div>
</template>

<script lang="ts">
import { Postcard} from '@element-plus/icons-vue'
import { defineComponent, PropType } from '@vue/runtime-core'

type DateTime = {
  showYear: string,
  showDay: string
}
export default defineComponent({
  components: {
    Postcard
  },
  props: {
    isShowIcon: {
      type: Boolean,
      default: false,
    },
    dataDate: {
      type: Object as PropType<DateTime>,
    }
  },
  setup(props, ctx) {
    const year = props.dataDate?.showYear
    const mouth = props.dataDate?.showDay
    return {
      year,
      mouth
    }
  }
})
</script>

<style lang="scss" scoped>
.date {
  width: 95px;
  margin-right: 20px;
  position: relative;
  .dateIcon {
    min-width: 85px;
    // width: 95px;
    height: 45px;
    background: $mainColor;
    color: white;
    text-align: center;
    line-height: 23px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    
    font-size: $fontSize-2;
    
    .date-mouth {
      font-weight: 600;
    }
  }
  .dateIcon::before {
    content:'';
    display: block;
    width: 4px;
    height: 100%;
    background: linear-gradient( rgba(17, 185, 208, 1), rgba(0, 0, 0, 0));
    position: absolute;
    top: 50px;
    left: 40px;
  }
  .isIcon {
    text-align: center;
    width: 100%;
    height: 85px;
    .Icon {
      position: relative;
      font-size: 40px;
      color: $mainColor;
      & > i {
        padding-right: 10px;
      }
    }
    .Icon::before {
      content: '';
      display: block;
      width: 4px;
      height: 40px;
      background: linear-gradient( rgba(17, 185, 208, 1), rgba(0, 0, 0, 0));
      position: absolute;
      top: 50px;
      left: 40px;
    }
  }
}


</style>